<template>
  <el-row id="cpts-power-table">
    <el-row v-if="!isViewShow" class="permission">
      没有权限!
    </el-row>

    <el-card v-else class="box-card">
      <div slot="header" class="clearfix">
        <span>统计报表</span>
        <el-button  :disabled="!isViewEdit" style="float: right; padding: 6px 6px;" type="primary" @click="handlerExport">导出</el-button>
      </div>

      <!--条件栏-->
      <el-row class="condition-layout">
        <span>时间类型:</span>
        <el-select @change="onTimeTypeChange" v-model="timeTypeValue" placeholder="请选择">
          <el-option
            v-for="item in timeTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-date-picker
          :type="pickerType"
          :value-format="dateFormat"
          @change="onPickerChange"
          v-model="selectDate"
          placeholder="选择日期时间">
        </el-date-picker>
        <el-button @click="submitCondition">确定</el-button>
      </el-row>

      <!--表格栏-->
      <el-row class="table-layout">
        <el-table
          :data="tableDatas"
          max-height="640"
          header-align="center"
          style="width: 100%">

          <el-table-column
            v-for="col in tableHead"
            :prop="col.prop" :label="col.label" >
          </el-table-column>

        </el-table>
      </el-row>

      <!--分页栏-->
     <!-- <el-row class="pagination-layout">
        <el-pagination
          layout="prev, pager, next"
          :total="paginationCount"
          :current-page="currentPage"
          :page-size="pageSize"
          @current-change="onPageChange">
        </el-pagination>
      </el-row>-->

    </el-card>

  </el-row>
</template>

<script>
  import {DateTime} from '../../utils/dateTime'
  export default {
    name: "powerTable",
    data(){
      return {
        isViewShow: false,
        isViewEdit: false,
        activeName:'1',
        timeTypeOptions:[{label:'年',value:4},{label:'月',value:3},{label:'日',value:2}],
        timeTypeValue: 2,
        pickerType:'date',
        dateFormat: 'yyyy-MM-dd',
        selectDate: new DateTime().getDate2(),
        tableDatas:[],
        tableHead: [],
        paginationCount: 0,
        currentPage:1,
        pageSize:10,
      }
    },
    mounted(){
      let obj = this.validateGlobal.getPermission(8)
      this.isViewShow = obj.isViewShow
      this.isViewEdit = obj.isViewEdit
      this.askLists()
    },
    methods:{
      submitCondition: function(){
        this.askLists()
      },
      onTimeTypeChange: function(value){
        let dateTime = new DateTime()
        if(value == 4){
          this.selectDate = dateTime.getYear()
          this.pickerType = 'year'
          this.dateFormat = 'yyyy'
        }else if (value == 3){
          this.selectDate = dateTime.getMonth()
          this.pickerType = 'month'
          this.dateFormat = 'yyyy-MM'
        }else {
          this.selectDate = dateTime.getDate2()
          this.pickerType = 'date'
          this.dateFormat = 'yyyy-MM-dd'
        }
      },
      handlerExport: function(){
        let _that = this
        let num = ''
        for(let i=0;i < 10;i++){
          num += Math.ceil(Math.random() * 10)
        }
        let fileName  = _that.selectDate+ "_统计表_" + num
        let url = this.ports.powerManage.exportTable
        let userId = sessionStorage.getItem("userId")
        let gateway = sessionStorage.getItem("gateway")
        let askInfo = {
          type: _that.timeTypeValue,
          userId: userId,
          current: 1,
          size: 1000,
          sn: gateway,
          time: _that.selectDate
        }
        this.http.postExcel(url,askInfo,res => {
          console.log(res)
          const link = document.createElement('a')
          let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob);
          link.setAttribute('download', fileName + '.xlsx')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        })
      },
      onPickerChange: function(date){
        this.selectDate = date
      },
      onPageChange: function(currentPage){
        this.currentPage = currentPage;
        this.askLists()
      },
      askLists: function () {
        let _that = this
        let userId = sessionStorage.getItem("userId")
        let gateway = sessionStorage.getItem("gateway")
        let url = _that.ports.powerManage.table
        let askData = {
          userId: userId,
          sn: gateway,
          time: _that.selectDate,
          type: _that.timeTypeValue
        }
        this.http.get(url,askData, res => {
          if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
             if (res.data.tableInfos) {
               _that.tableHead = res.data.tableInfos
               _that.tableDatas = res.data.values
             }
          }else{
            _that.$message('列表获取失败!');
          }
        })
      },
    }
  }
</script>

<style lang="scss">
  #cpts-power-table{

    .el-card{
      margin: 20px 20px 0 20px;
      height: 770px;

      .condition-layout{

      }

      .table-layout{
         margin-top: 20px;
      }

      .pagination-layout{
        text-align: center;
        margin-top: 10px;
      }


    }

    .evc-dialog-itemize{
      > :first-child.el-row{
        margin-top: 10px;
        margin-bottom: 20px;
      }
    }

    .evc-submit-layout{
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }
  }
</style>
